<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<!--引入layui  -->
	<link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
	<!--引入layui  -->
	<script src="layui/layui.js" charset="utf-8"></script>
	<!--引入jquery  -->
	<script src="js/jquery-2.1.1.min.js" charset="utf-8"></script>
	<script src="../js/global.js"></script>
<body>
	<!-- 查询条件输入框 -->
	<div class="layui-form-item" style="margin-top: 10px;">
		<form class="layui-form" onsubmit="return false;">
			<label class="layui-form-mid">姓名:</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="userName" name="userName" autocomplete="off" class="layui-input">
			</div>
			<label class="layui-form-mid">签到情况:</label>
			<div class="layui-input-inline" style="width: 200px;">
				<select  name="checkState">
					<option value="">请选择</option>
					<option value="1">已签到</option>
					<option value="2">已签退</option>
				</select>
			</div>
			<label class="layui-form-mid">查看签到天数:</label>
			<div class="layui-input-inline" style="width: 200px;">
				<select  name="numberDays">
					<option value="3" selected = "selected">7天内</option>
					<option value="1">今天</option>
					<option value="4">本月</option>
					<option value="2">所有记录</option>
				</select>
			</div>
			<div class="layui-input-inline" style="width: 300px;">
				<button class="layui-btn" lay-submit="" lay-filter="search" id="search" data-type="reload"><i class="layui-icon">&#xe615;</i>搜索</button>
				<button class="layui-btn layui-btn-normal" type="reset" ><i class="layui-icon">&#xe666;</i>重置</button>
			</div>
		</form>
	</div>


	<!--定义数据表格table  -->
	<table class="layui-hide" id="proTable" lay-filter="filterTable"></table>
	
	
	<!-- 图片上传的弹层页面  -->
	<div id="imgUploadLayer" style="display: none; margin-top: 20px;">
		<form class="layui-form" lay-filter="imgForm" id="imgForm"
			action="">
			<input type="hidden" id="pid-img" name="pid" class="layui-input">
			<input type="hidden" id="mainImgUrl" name="mainImgUrl" class="layui-input">
			<input type="hidden" id="futuImgUrl" name="futuImgUrl" class="layui-input">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
			  <legend>产品图片上传，上传完后记得提交哦</legend>
			</fieldset>
			<div class="layui-upload" style="margin-left: 10px">
			  <button type="button" class="layui-btn" id="maintu">主图上传</button>
			  <div class="layui-upload-list">
			    <img class="layui-upload-img" id="demo1" style="width: 300px;height:200px" />
			    <p id="demoText1"></p>
			  </div>
			</div>
			<div class="layui-upload" style="margin-left: 10px">
			  <button type="button" class="layui-btn" id="futu">副图上传</button>
			  <div class="layui-upload-list">
			    <img class="layui-upload-img" id="demo2" style="width: 300px;height:200px" />
			    <p id="demoText2"></p>
			  </div>
			</div>  
			<div class="layui-btn-container" style="text-align: center;">
				<button class="layui-btn" lay-filter="imgSubmit" lay-submit="">提交</button>
			</div>
		</form>
	</div>
	
	<!--	表格里操作栏的查看、编辑等按钮  -->
	<script type="text/html" id="barDemo">
		{{# if (d.checkState == 1){}}
		    <a class="layui-btn layui-btn-xs layui-btn-primary ops" ops="check:edit" lay-event="edit"><i class="layui-icon">&#xe642;</i>签退</a>
		{{# } }}
	</script>
	
	
	
	<script>
	/*定义好各种组件   */
	layui.use(['laydate','layer','form','table','tree','upload'], function() {
		var laydate = layui.laydate	//日期组件
			,layer = layui.layer	//弹层组件
			,form = layui.form		//表单组件
			,tree = layui.tree		//树形结构组件
			,upload = layui.upload  //上传组件
			,$= layui.jquery    	//jquery
			,table = layui.table;	//表格组件
			
			/* 渲染日期组件  */
			laydate.render({
				  elem: '#beginTime'
			});
			laydate.render({
				  elem: '#onSaleTime'
				 ,type: 'datetime'
			});
			
		
		//使用表格组件，渲染表格，填充数据
	 	table.render({
			elem: '#proTable',	 				//表格的id		
			url: globalData.server+'userchecks/selectUserChecks',					//提交到后台的地址
			headers:{token:globalData.token},		//提交到后台的地址
			method: 'get', 						//请求方式
			even: true, 						//隔行变色			
			page: true,							//开启分页			
			toolbar: '#toolbarDemo', 			//开启头部工具栏
			title: '产品表', 					//表格名称		
			cols: [
					[{
						field: 'userId',	//对应实体类里的属性    （必需有）
						fixed: 'left',	//固定方式，left左固定，right右固定 （可选）
						align:'center', //排列方式：left左对齐，center居中，right右对齐（可选）
						width: 80,		//单元格宽度（可选）	
						title: 'ID',	//表头名称			（必需有）
						sort: true		//开启排序（可选）
					},{
						field: 'userName',
						title: '姓名',
						width: 180,
					},{
						field: 'checkInTime',	//对应实体类里的属性
						width: 180,		//单元格宽度
						title: '签到时间'		//表头名称
					}, {
						field: 'checkOutTime',
						width: 180,
						title: '签退时间',
					},{
				    	field: 'checkState',
				    	title: '状态',
				    	width: 100,
				    	fixed: 'right', 
				    	templet: function (d) {
				             if (d.checkState == 1) {
				                 return '<div style="color:#5FB878;" >已签到</div>';
				              }else if(d.checkState == 2){
				                 return '<div style="color:#FF5722;" >已签退</div>';
				              }
				           }
				  	},{
						fixed: 'right',
						width: 150,
						title: '操作',
						toolbar: '#barDemo'
					}]
				],
				done: function(res, curr, count){
					var myOps = sessionStorage.getItem("buttonPermission");
					$(".ops").each(function(){
						if(myOps.indexOf($(this).attr('ops'))==-1){
							$(this).hide();
						}
					});
				}
			});
		
			
	 	/*
			条件查询
		*/
	    form.on('submit(search)', function (data) {
	        var field = data.field;
	        //执行重载
	        table.reload('proTable', {
	            page: { curr: 1 },
	            where: field
	        });
	    }); 
		
		//数据表格里的事件监听
		table.on('tool(filterTable)',function(obj){
			var data = obj.data;//获取当前行的数据
			switch(obj.event){
		      case 'edit':		//修改操作
				  if(confirm("确定要帮"+data.userName+"签退吗？")){
					  $.ajax({
						  type: 'post', 		//提交方式get或post
						  url: globalData.server+'userchecks/qzsignOut?id='+data.id, 			//提交路径
						  headers:{token:globalData.token},
						  //data: {'id':data.id}, 	//参数
						  dataType: 'json', 	//返回的数据类型
						  success: function(res) { 		//提交成功
							  layer.alert(res.msg);
							  table.reload('proTable');
						  },
						  error: function() { 			//提交失败
							  alert("系统异常！！")
						  }
					  });
				  }
		    	  
		      break;
			};
		})
		 
	});
	
	
	</script>

</body>
</html>